<style lang="less" scoped>
	.content {
		overflow-y: hidden;
		width: 100%;

		.container {
			width: 96%;
			margin: 0 auto;

		}

		.indexA {
			width: 100%;
			min-width: 375px;
			margin-top: 50px;

			.text {
				width: 96%;
				margin-left: 2%;
				margin-bottom: 5px;
			}

			.container {
				width: 96%;
				display: flex;
				justify-content: space-between;
				overflow-x: scroll;
				overflow-y: hidden;
				
				.list {
					height: 145px;
					width: 100px;
					margin-right: 10px;
					position: relative;

					.bj {
						width: 100px;

						img {
							width: 100%;
							border-radius: 6px;
						}
					}

					.icon {
						position: absolute;
						width: 24%;
						top: 70px;
						right: 5px;

						img {
							width: 100%;
						}
					}

					.mask {
						// position: absolute;
						margin-top: 8px;
						width: 100%;
						font-size: 12px;
						// bottom: 0;
						// background-color: white;
					}

					.playCount {
						position: absolute;
						top: 5px;
						left: 5px;
						// background-color: aqua;
						font-size: 14px;
						color: white;
					}
				}
			}


		}

		.container::-webkit-scrollbar {
			display: none;
		}
	}

	.music {
		width: 100%;
		margin-top: 15px;
		.title{
			margin-left: 2%;
		}
		.container {
			overflow-x: scroll;

			.list {
				width: 384%;
				display: grid;
				grid-template-rows: repeat(3, 60px);
				grid-template-columns: 1fr 1fr 1fr 1fr;
				margin-top: 10px;
				// background-color: red;
				.music_list {
					// background-color: red;
					position: relative;
					width: 94%;

					.img {
						width: 13%;
						img {
							width: 100%;
							border-radius: 4px;
						}
					}
					.name{
						position: absolute;
						top:0px;
						left:16%;
						font-size: 14px;
					}
					.group{
						position: absolute;
						left:16%;
						bottom: 22px;
						display: flex;
						.author{
							font-size: 10px;
							color:#7c818e;
							margin-left: 5px;
						}
						.reason{
							background-color: #ffe7e9;
							padding: 1px;
							padding-left: 5px;
							padding-right: 5px;
							border-radius: 3px;
							font-weight: bold;
							font-size: 8px;
							color:#eb4d44;
						}
					}
					
					.play_icon {
						width: 6%;
						position: absolute;
						top: 0;
						right:5px;
						top:15px;
						img {
							width: 100%;
						}
					}
				}
			}
		}
	}
</style>
<template>
	<view class="content">
		<index-top></index-top>
		<!-- <indexListA></indexListA> -->
		<div class="loading" v-if="isLoading" style="position: absolute; top: 40%;left:30%;">
			<loading></loading>
		</div>
		<view class="indexA">
			<view class="text">
				<span>推荐歌单</span>
				<uni-icons type="forward" size="14" color="black"></uni-icons>
			</view>
			<view class="container">
				<div class="list" v-for="(item,index) in arr">
					<div class="bj" @click="toList(item.id)">
						<img :src=item.picUrl alt="" />
					</div>
					<div class="icon">
						<img src="../../static/playWite.png" alt="" />
					</div>
					<div class="mask">
						<span>{{item.name}}</span>
					</div>
					<div class="playCount">
						<span><uni-icons type="headphones" size="20" color="white"></uni-icons>{{item.playCount}}</span>
					</div>
				</div>
			</view>
		</view>
		<view class="music">
			<div class="title">
				<span>推荐歌曲</span>
			</div>
			<div class="container">
				
				<div class="list">
					<div class="music_list" v-for="(item,index) in musicRecomment" @click="toMusic(item.id)">
						<div class="img">
							<img :src=item.picUrl alt="" />
						</div>
						<div class="group">
							<div class="reason">
							<span>{{item.reason}}</span>
						</div>
						<div class="author">
							<span>{{item.author}}</span>
						</div>
						</div>
						<div class="name">
							<span>{{item.name}}</span>
						</div>
						
						<div class="play_icon">
							<img src="../../static/playBlack.png" alt="" style="width: 100%">
						</div>
					</div>
				</div>
			</div>
		</view>
		<!-- 排行榜 -->
		<view class="indexA" style="margin-top: 15px;">
			<view class="text">
				<span>排行榜</span>
				<uni-icons type="forward" size="14" color="black"></uni-icons>
			</view>
			<view class="container">
				<div class="list" v-for="(item,index) in toplist">
					<div class="bj" @click="toList(item.id)">
						<img :src=item.picUrl alt="" />
					</div>
					
					<div class="icon">
						<img src="../../static/playWite.png" alt="" />
					</div>
					<div class="mask">
						<span>{{item.name}}</span>
					</div>
					<div class="playCount" v-if="item.playCount != undefined">
						<span><uni-icons type="headphones" size="20" color="white"></uni-icons>{{item.playCount}}</span>
					</div>
				</div>
			</view>
		</view>

	</view>
</template>

<script>
	import loading from '../../components/loading.vue';
	import {
		getRecomment
	} from '../../api/request';
	import {
		getToplist
	} from '../../api/request';
	import {
		getMusicRecommend
	} from '../../api/request';
	import indexTop from '../../components/indexTop.vue'
	import indexListA from '../../components/indexListA.vue'
	export default {
		components: {
			indexTop,
			loading
		},
		data() {
			return {
				arr: [],
				toplist: [],
				musicRecomment: [],
				isLoading:false,
			}
		},
		async onLoad() {
			let limit = Math.ceil(Math.random() * 50)
			this.isLoading=true
			await this.getRecommentFn(limit)
			await this.getMusicRecommentFn()
			await this.getToplistFn()
		},
		methods: {
			async getRecommentFn(limit) {

				await getRecomment({
						limit
					})
					.then(
						(data) => {
							let content = data.result
							// console.log("reslut: "+JSON.stringify(content))
							let newArr = content.map(item => {
								let obj = {}
								obj.id = item.id;
								if (item.name.length > 15) {
									obj.name = item.name.substring(0, 15) + '...';
								} else {
									obj.name = item.name
								}

								obj.picUrl = item.picUrl;
								let playCount = item.playCount.toString()
								if (playCount.length > 4 && playCount.length < 9) {
									obj.playCount = playCount.substring(0, playCount.length - 4) + "万";
								} else if (playCount.length >= 9) {
									obj.playCount = playCount.substring(0, playCount.length - 8) + "亿";
								} else {
									obj.playCount = playCount
								}
								return obj
							})
							this.arr = newArr.slice(0, 6)
							// console.log("arr:"+JSON.stringify(this.arr))
						}
					)
			},
			async getToplistFn() {

				await getToplist({

					})
					.then(
						(data) => {
							let {
								list
							} = data
							// console.log("reslut: "+JSON.stringify(content))
							let newArr = list.map(item => {
								let obj = {}
								obj.picUrl = item.coverImgUrl;
								obj.id = item.id;
								let playCount = item.playCount.toString()
								if (playCount.length >= 4 && playCount.length < 9) {
									obj.playCount = playCount.substring(0, playCount.length - 4) + "万";
								} else if (playCount.length >= 8) {
									obj.playCount = playCount.substring(0, playCount.length - 8) + "亿";
								} else {
									obj.playCount = playCount
								}
								// obj.playCount=item.playCount
								return obj
								obj.name = item.name
								return obj
							})
							this.toplist = newArr
							// console.log("arr:"+JSON.stringify(this.arr))
						}
					)
					this.isLoading=false
			},
			async getMusicRecommentFn() {
				await getMusicRecommend()
					.then((data) => {
						let {
							dailySongs
						} = data.data;
						let newArr = dailySongs.map(item => {
							let obj = {}
							obj.id = item.id
							obj.name = item.name;
							obj.author = item.ar[0].name;
							obj.picUrl = item.al.picUrl
							if(item.reason==null){
								obj.reason='十万收藏'
							}else{
								obj.reason = item.reason;
							}
							return obj
						})
						// console.log(""+JSON.stringify(newArr))
						this.musicRecomment = newArr.slice(0,12)
					})
			},
			toList(id) {
				uni.navigateTo({
					url: "/pages/meau/meau?id=" + id
				})
			},
			toMusic(id){
				uni.navigateTo({
					url: "/pages/music/music?id=" + id
				})
				localStorage.setItem('SongList',JSON.stringify(this.musicRecomment))
			}
		}
	}
</script>